<template>
  <div class="music-list">
    <div class="back" @click="back">
      <i class="icon-back"></i>
    </div>
    <h1 class="title" v-html="title"></h1>
    <div class="bg-image" :style="bdStyle" ref="bgimage">
      <div class="play-wrapper">
        <div class="play" v-show="songs.length > 0 " ref="playButton" @click="random">
          <i class="icon-play"></i>
          <span class="text">随机播放全部</span>
        </div>
      </div>
      <div class="filter" ref="filter"></div>
    </div>
    <div class="bg-layer" ref="layer"></div>
    <scroll :data="songs" :probe-type="probeType" :listen-scroll="listenScroll" @scroll="scroll" class="list" ref="list">
      <div class="song-list-wrapper">
        <song-list :songs='songs' :rank="rank" @select="selectItem"></song-list>
      </div>
      <div class="loading-container" v-show="!songs.length">
        <loading></loading>
      </div>
    </scroll>
  </div>
</template>

<script>
  import Scroll from 'base/scroll/scroll';
  import SongList from 'base/song-list/SongList';
  import loading from 'base/loading/loading';
  import {
    mapActions
  } from 'vuex';
  import {playlistMixin} from 'common/js/mixin';

  const RESERVED_HEIGHT = 40

  export default {
    name: 'MusicList',
    mixins: [playlistMixin],
    props: {
      bgImage: {
        type: String,
        default: ''
      },
      songs: {
        type: Array,
        default: []
      },
      title: {
        type: String,
        default: ''
      },
      rank:{
        type: Boolean,
        default: false
      }
    },
    computed: {
      bdStyle() {
        return `background-image:url(${this.bgImage})`
      }
    },
    components: {
      Scroll,
      SongList,
      loading
    },
    data() {
      return {
        scrollY: 0
      }
    },
    methods: {
      scroll(pos) {
        this.scrollY = pos.y
      },
      back() {
        this.$router.back()
      },
      selectItem(item, index) {
        this.selectPlay({
          list: this.songs,
          index
        })
      },
      // 随机播放
      random() {
        this.randomPlay({
          list: this.songs
        })
      },
      // 
      handlePlayList(playList){
        const bottom = playList.length > 0 ? '60px' : ''
        this.$refs.list.$el.style.bottom = bottom
        this.$refs.list.refresh()
      },
      ...mapActions([
        'selectPlay',
        'randomPlay'
      ])
    },
    watch: {
      scrollY(newY) {
        const thisstyle = this.$refs.bgimage.style
        const percent = Math.abs(newY / this.imageHeight)
        let tranlateY = Math.max(this.minTranslateY, newY);
        let zIndex = 0;
        let scale = 1;
        let blur = 0;

        this.$refs.layer.style['transform'] = `translate3d(0,${tranlateY}px,0)`
        this.$refs.layer.style['webkitTransform'] = `translate3d(0,${tranlateY}px,0)`

        if (newY > 0) {
          scale = 1 + percent
          zIndex = 10
        } else {
          blur = Math.min(20 * percent, 20)
        }

        this.$refs.filter.style['backdrop-filter'] = `blur(${blur}px)`
        this.$refs.filter.style['webkitBackdrop-filter'] = `blur(${blur}p)`

        if (this.minTranslateY > newY) {
          zIndex = 10
          thisstyle.height = `${RESERVED_HEIGHT}px`
          thisstyle.paddingTop = 0
          this.$refs.playButton.style.display = 'none'
        } else {
          thisstyle.height = 0
          thisstyle.paddingTop = '70%'
          this.$refs.playButton.style.display = ''
        }
        thisstyle.zIndex = zIndex
        thisstyle['transform'] = `scale(${scale})`
        thisstyle['webkitTransform'] = `scale(${scale})`
      }
    },
    created() {
      this.probeType = 3
      this.listenScroll = true
    },
    mounted() {
      this.imageHeight = this.$refs.bgimage.clientHeight
      this.minTranslateY = -this.imageHeight + RESERVED_HEIGHT
      this.$refs.list.$el.style.top = `${this.imageHeight}px`
    },
  }

</script>
